<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侃侃岛</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/client.css">

<!--    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" href="css/input.css">

    <!--    设置-->
    <link rel="stylesheet" href="css/setting.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!--    <link rel="stylesheet" href="css/all.min.css">-->

    <!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css">-->
    <link rel="stylesheet" href="css/cropper.min.css">
    <link rel="stylesheet" href="css/userInfo.css">

    <!--    好友列表-->
    <link rel="stylesheet" href="css/friend-table.css">

    <!--    添加好友css-->
    <link rel="stylesheet" href="css/addFriend.css">

    <!--    收到好友请求css-->
    <link rel="stylesheet" href="css/receiveAddFriend.css">


    <!--    刷新按钮css-->
    <link rel="stylesheet" href="css/refresh.css">
</head>
<body>
<!--    &lt;!&ndash; 作为遮罩层, 实现背景模糊的效果 &ndash;&gt;-->
<div class="cover"></div>
<!-- 这个 div 作为整个界面的总的容器 -->
<div class="client-container">

    <!--        header-->
    <div class="col-lg-12 col-12 d-flex align-items-center">
        <!-- 好友按钮 -->
        <button class="receive-add-friendReq-trigger" id="receive-add-friendReq-trigger">
            <i class="fas fa-user-plus"></i>
            好友请求
            <span class="receive-add-friendReq-badge" id="receive-add-friendReq-badge">3</span>
        </button>
<!--        设置按钮-->
        <button class="set-settings-btn" id="set-settingsBtn">
            <i class="fas fa-cog"></i>
        </button>
        <!-- 使用更独特的ID和类名 -->
        <button class="refresh-isolated-button" id="refreshIsolatedButton">
            <div class="refresh-isolated-icon">↻</div>
            <div class="refresh-isolated-status" id="refreshIsolatedStatus"></div>
        </button>
    </div>

    <!-- 好友请求弹窗 -->
    <div class="receive-add-friendReq-modal" id="receive-add-friendReq-modal">
        <div class="receive-add-friendReq-modal-content">
            <div class="receive-add-friendReq-modal-header">
                <div class="receive-add-friendReq-modal-title">好友请求</div>
                <button class="receive-add-friendReq-modal-close" id="receive-add-friendReq-modal-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="receive-add-friendReq-modal-body" id="receive-add-friendReq-modal-body">
                <!-- 好友请求列表将在这里动态生成 -->
            </div>
        </div>
    </div>

    <!-- 中间的聊天区域 -->
    <div class="main">
        <!-- 左侧区域, 显示好友列表和会话列表 -->
        <div class="left">
            <div class="user-info-container user-info-minimal">
                <div class="user-info-avatar-container">
                    <img src="/head-portrait/default.png" alt="用户头像" class="user-info-avatar" id="user-info-img">
                </div>
                <div class="user-info-content">
                    <div class="user-info-name"></div>
                    <div class="user-info-uid">
                    </div>
                    <div class="user-info-signature"></div>
                </div>
            </div>
            <!-- 这是搜索框 -->
            <div class="search">
                <!-- 搜索框中的输入框 -->
                <label>
                    <input type="text" class="search-input" id="search-input" autocomplete="new-password">
                </label>
                <!-- 点击按钮进行搜索 -->
                <button class="search-button"></button>
            </div>

            <!-- 标签页 -->
            <div class="tab">
                <!-- 会话列表标签 -->
                <div class="tab-session"></div>
                <!-- 好友列表标签 -->
                <div class="tab-friend">
                </div>
            </div>
            <!-- 会话列表 -->
            <ul class="list" id="session-list">
            </ul>

            <ul class="list hide" id="friend-list">
                <!--                 好友列表 -->
                <div class="add-friend-container">
                    <button class="add-friend-btn" id="add-friend-btn">
                        <i class="fas fa-user-plus"></i> 添加好友
                    </button>
                </div>
            </ul>
        </div>

        <!-- 添加好友弹窗 -->
        <div class="add-friend-modal" id="add-friend-modal">
            <div class="add-friend-modal-content">
                <div class="add-friend-modal-header">
                    <div class="add-friend-modal-title">添加新朋友</div>
                    <button class="add-friend-close-modal" id="add-friend-close-modal">&times;</button>
                </div>

                <div class="add-friend-form-group">
                    <label for="add-friend-id" class="add-friend-form-label">朋友ID</label>
                    <input type="text" id="add-friend-id" class="add-friend-form-input" placeholder="请输入朋友ID"
                           required>
                </div>

                <div class="add-friend-form-group">
                    <label for="add-friend-greeting" class="add-friend-form-label">打招呼消息</label>
                    <textarea id="add-friend-greeting" class="add-friend-form-textarea"
                              placeholder="请输入打招呼消息..." required>你好，我是你的朋友，希望能加你为好友！</textarea>
                </div>

                <button class="add-friend-submit-btn" id="add-friend-submit-btn">发送好友请求</button>

                <div class="add-friend-success-message" id="add-friend-success-message">
                    <i class="fas fa-check-circle"></i> 好友请求已成功发送！
                </div>
            </div>
        </div>

        <!-- 右侧区域, 显示聊天编辑框 -->
        <div class="right">
            <!-- 会话标题 -->
            <div class="title"></div>
            <!--            聊天框-->
            <div class="container">
                <div class="chat-container" id="chatContainer">
                </div>
            </div>
            <!--            输入框-->
            <div class="input-container">
                <div class="toolbar">
                    <div class="toolbar-button" title="表情">😊</div>
                    <div class="toolbar-button" title="图片">🖼️</div>
                    <label for="fileInput" class="toolbar-button" title="附件">📎</label>
                    <input type="file" id="fileInput" multiple class="hidden">

                    <div class="file-previews" id="filePreviews"></div>
                </div>

                <div class="input-area">
                    <div class="input-box" id="inputBox" contenteditable="true"></div>
                    <div class="placeholder_">输入消息...（支持粘贴文件，按Enter发送）</div>

                    <!-- 整合到输入框的按钮 -->
                    <div class="input-buttons">
                        <button class="input-button send-button" id="sendBtn" title="发送">
                            发送
                        </button>
                    </div>
                </div>
                <div class="enter-hint">按Enter发送，Shift+Enter换行</div>
            </div>
        </div>
    </div>
    <div class="file-modal-body" id="fileModalBody">
        <!-- 文件预览内容将在这里动态加载 -->
    </div>

    <!--    设置页面-->
    <!-- 设置模态框 -->
    <div class="set-modal-overlay" id="set-settingsModal">
        <div class="set-settings-modal">
            <div class="set-modal-header">
                <h2><i class="fas fa-cog"></i> 用户设置</h2>
                <button class="set-close-btn" id="set-closeModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="set-modal-body">
                <div class="set-settings-tabs">
                    <button class="set-tab-btn active" data-tab="set-profile">
                        <i class="fas fa-user"></i> 个人信息
                    </button>
                    <button class="set-tab-btn" data-tab="set-password">
                        <i class="fas fa-lock"></i> 修改密码
                    </button>
                    <button class="set-tab-btn" data-tab="set-email">
                        <i class="fas fa-envelope"></i> 绑定邮箱
                    </button>
                    <!--                    <button class="set-tab-btn" data-tab="set-notifications">-->
                    <!--                        <i class="fas fa-bell"></i> 通知设置-->
                    <!--                    </button>-->
                    <button class="set-tab-btn" data-tab="set-background">
                        <i class="fa fa-area-chart"></i> 修改背景
                    </button>
                    <button class="set-tab-btn" data-tab="set-log-off">
                        <i class="	fa fa-user-times"></i> 注销登录
                    </button>
                </div>

                <div class="set-settings-content">
                    <!-- 个人信息设置 -->
                    <div class="set-tab-content active" id="set-profile">
                        <h3 class="set-section-title">个人信息设置</h3>

                        <div class="set-form-group">
                            <label class="set-label" for="set-username">用户名</label>
                            <input type="text" class="set-input" id="set-username" autocomplete="new-password">
                        </div>

                        <div class="set-form-group">
                            <label class="set-label" for="set-signature">个性签名</label>
                            <textarea class="set-textarea" id="set-signature" rows="3"></textarea>
                        </div>

                        <div class="set-avatar-section">
                            <div class="set-current-avatar">
                                <label class="set-label">当前头像</label>
                                <img src="#" id="set-head-portrait" alt="用户头像">
                            </div>

                            <div class="set-avatar-upload">
                                <label class="set-label">上传新头像</label>
                                <div class="set-upload-btn" id="set-uploadTrigger">
                                    <i class="fas fa-upload"></i> 选择图片
                                </div>
                                <input type="file" id="set-avatar-input" accept="image/*">

                                <div class="set-crop-container" id="set-cropContainer">
                                    <div class="set-crop-preview" id="set-cropPreview"></div>
                                    <div class="set-crop-actions">
                                        <button class="set-btn set-btn-primary" id="set-confirmCrop">
                                            <i class="fas fa-crop"></i> 确认裁剪
                                        </button>
                                        <button class="set-btn set-btn-secondary" id="set-cancelCrop">
                                            <i class="fas fa-times"></i> 取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="set-submit-section">
                            <button class="set-submit-btn" id="set-saveProfile">
                                <i class="fas fa-save"></i> 保存个人信息
                            </button>
                        </div>
                    </div>

                    <!-- 修改密码 -->
                    <div class="set-tab-content" id="set-password">
                        <h3 class="set-section-title">修改密码</h3>

                        <div class="set-form-group">
                            <label class="set-label" for="set-currentPassword">当前密码</label>
                            <input type="password" class="set-input" id="set-currentPassword" value="">
                        </div>

                        <div class="set-form-group">
                            <label class="set-label" for="set-newPassword">新密码</label>
                            <input type="password" class="set-input" id="set-newPassword" autocomplete="off">
                        </div>

                        <div class="set-form-group">
                            <label class="set-label" for="set-confirmPassword">确认新密码</label>
                            <input type="password" class="set-input" id="set-confirmPassword">
                        </div>

                        <div class="set-submit-section">
                            <button class="set-submit-btn" id="set-savePassword">
                                <i class="fas fa-save"></i> 更新密码
                            </button>
                        </div>
                    </div>

                    <!-- 修改邮箱 -->
                    <div class="set-tab-content" id="set-email">
                        <h3 class="set-section-title">修改邮箱</h3>

                        <div class="set-form-group">
                            <label class="set-label" id="set-text-1" for="set-currentEmail">当前邮箱</label>
                            <input type="email" class="set-input" id="set-currentEmail" value="">
                        </div>

                        <div class="set-form-group" id="set-form-valid">
                            <label class="set-label" id="set-text-2" for="set-newEmail">新邮箱地址</label>
                            <input type="email" class="set-input" id="set-newEmail">
                        </div>

                        <!-- 新增验证码部分 -->
                        <div class="set-form-group">
                            <label class="set-label" for="set-verificationCode">验证码</label>
                            <div style="display: flex; gap: 10px;">
                                <input type="text" class="set-input" id="set-verificationCode"
                                       placeholder="请输入旧邮箱验证码" style="flex: 1;">
                                <button class="set-btn set-btn-secondary" id="set-sendCode" style="width: 120px;">
                                    发送验证码
                                </button>
                            </div>
                        </div>

                        <div class="set-submit-section">
                            <button class="set-submit-btn" id="set-saveEmail">
                                <i class="fas fa-save"></i> 更新邮箱
                            </button>
                        </div>
                    </div>

                    <!-- 其他设置选项 -->

                    <!--                    <div class="set-tab-content" id="set-notifications">-->
                    <!--                        <h3 class="set-section-title">通知设置</h3>-->
                    <!--                        &lt;!&ndash; 通知设置内容 &ndash;&gt;-->
                    <!--                    </div>-->

                    <!-- 背景修改-->
                    <div class="set-tab-content" id="set-background">
                        <h3 class="set-section-title">修改背景</h3>
                        <!-- 背景修改 -->
                        <div class="set-settings-container">
                            <div class="set-preview-section">
                                <div class="set-cover"></div>
                                <div class="set-preview-image"></div>
                            </div>

                            <div class="set-controls-section">
                                <h2 class="set-section-title">高级背景图片设置</h2>

                                <div class="set-upload-section">
                                    <label for="setFileInput" class="set-upload-btn">上传自定义图片</label>
                                    <input type="file" id="setFileInput" accept="image/*">
                                </div>

                                <div class="set-stacked-selector" id="setStackedSelector">
                                    <!-- 图片选项将通过JavaScript动态添加 -->
                                </div>

                                <div class="set-blur-control">
                                    <div class="set-control-row">
                                        <label for="setBlurRange">模糊强度:</label>
                                        <input type="range" id="setBlurRange" min="0" max="40" value="20">
                                        <span class="set-blur-value" id="setBlurValue">20px</span>
                                    </div>
                                </div>

                                <div class="set-controls">
                                    <button class="set-button" id="setRandomBtn">随机</button>
                                    <button class="set-button" id="setApplyBtn">应用</button>
                                    <button class="set-button" id="setResetBtn">重置</button>
                                </div>

                                <div class="set-image-info">
                                    <p>当前背景: <span id="setCurrentImage">默认猫咪</span></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 注销登录-->
                    <div class="set-tab-content" id="set-log-off">
                        <h3 class="set-section-title">注销登录</h3>
                        <button class="set-button" id="log-off">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知 -->
    <div class="set-notification" id="set-notification">
        <i class="fas fa-check-circle"></i> <span id="set-notificationText">设置已成功更新！</span>
    </div>

</div>

<!-- 引入 jquery, 注意, 这个引入操作要在使用之前! 否则会找不到相关函数的定义 -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/client.js"></script>
<!--聊天组件-->
<script src="js/chat.js"></script>
<!-- 设置-->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<script src="js/cropper.min.js"></script>
<script src="js/set.js"></script>

<!--background set-->
<script src="js/background.js"></script>

<!-- 添加好友js-->
<script src="js/addFriend.js"></script>

<script src="js/receiveAddFriend.js"></script>

<!-- 刷新按钮js-->
<script src="js/refresh.js"></script>

<!--调整页面大小-->
<script>
    // 页面加载时执行
    window.onload = function () {
        document.body.style.zoom = "80%";
    };

    $(".left .search button").click(search);

    function search () {
        let sear = $(".left .search input").val();
        $(".left #session-list div h3").each(function () {
            let name = this.textContent;
            if (name == sear) {
                this.click();
            }
        });
    }

</script>
</body>
</html>